<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import Stomp from "stompjs";
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from "@/utils/mqtt";
import {delConfig} from "@/api/system/config";
export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
      return {
          title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
          titleTemplate: title => {
              return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
          }
      }
  },
  mounted:async function (){
    console.log(1);
    this.setLangMessage();
  },
  data() {
    return {
      client: Stomp.client(MQTT_SERVICE)
    };
  },
  created() {
    this.connect();
  },
  methods: {
    onConnected: function(frame) {
      //订阅频道
      const topic = "/exchange/topic.mode/queue.#";
      this.client.subscribe(topic, this.responseCallback, this.onFailed);
    },
    onFailed: function(frame) {
      console.log("MQ Failed: " + frame);
    },
    responseCallback: function(frame) {
      console.log("MQ frame=>" + frame);
      console.log("MQ msg=>" + frame.body);
      //打开弹框
      this.$modal.confirm('网页mq接收到的信息为:' + frame.body);
    },
    connect: function() {
      //初始化mqtt客户端，并连接mqtt服务
      const headers = {
        login: MQTT_USERNAME,
        passcode: MQTT_PASSWORD
      };
      this.client.connect(headers, this.onConnected, this.onFailed);
    }
  }
}
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
